<template>
  <div>
    <div class="browser">
      <div class="browser-top">
        <Row>
          <Col span="5">
            浏览器
          </Col>
          <Col span="9">
            <Button-group>
              <Button size="small" icon="ios-arrow-back"></Button>
              <Button size="small" icon="ios-arrow-forward"></Button>
              <Button size="small" icon="ios-refresh"></Button>
            </Button-group>
            <Input v-model="webview.inputUrl" @on-enter="webviewUrlInputEnterHandle" style="width: 50%" size="small" placeholder="请输入网址"/>
          </Col>
          <Col span="9">
            <Button size="small" @click="_open(webview.url, '_blank')">打开原网页</Button>
            <Button size="small" @click="_open(ImgProxyUrl + _base64Encode(encodeURI(webview.url)), '_blank')">打开代理页</Button>
            <Button size="small" @click="_open(MhtmlTransforURL + _base64Encode(encodeURI(webview.url)), '_blank')">下载mhtml页</Button>
            <Button size="small" @click="_screenCapture(webview.url, '_blank')">截屏</Button>
            <Button size="small" @click="collection.isShow = true">显示数据采集</Button>
            <Button size="small" @click="webview.disableJs = !webview.disableJs">{{webview.disableJs ? '启用JS' : '禁用JS'}}</Button>
          </Col>
          <Col span="1">
            &nbsp;
          </Col>
        </Row>
      </div>
      <div class="browser-main">
        <iframe v-if="isShow"
          id="webview-iframe" ref="iframe"
          :src="ImgProxyUrl + _base64Encode(encodeURI(webview.url))"
          @load="_loaded"
          :sandbox="webview.disableJs ? '' : 'allow-scripts allow-forms allow-popups allow-same-origin'"
          style="width: 100%; height: 100%; border: 0;"></iframe>
      </div>
      <div class="browser-footer">
        {{webview.url}}
      </div>
    </div>
    <Modal v-model="collection.isShow" draggable scrollable :mask="false" title="数据采集">
      <Row v-for="item in collection.columns" :key="item.key" :gutter="12" style="margin-bottom: 10px;">
        <Col span="6">
          <span style="width: 100%; line-height: 32px; text-align: right; display: inline-block;">{{item.title}}:</span>
        </Col>
        <Col span="12">
          <Select v-if="item.formType == 'select'" v-model="collectionData[item.key]">
            <Option v-for="op in item.options" :value="op.value" :key="op.key">{{ op.title }}</Option>
          </Select>
          <Input v-else-if="item.dataType != 'arr'" v-model="collectionData[item.key]" :placeholder="'请输入' + item.title"/>
          <Input v-else v-model="collectionData[item.key]" :placeholder="'请输入' + item.title" type="textarea" :rows="3"/>
        </Col>
      </Row>
    </Modal>
    <Modal v-model="collectionVideo.isShow" draggable scrollable :mask="false" title="视频采集">
      <Row v-for="item in collectionVideo.videoUrls" :key="item" :gutter="12" style="margin-bottom: 10px;">
        <Col span="2">
          &nbsp;
        </Col>
        <Col span="20">
          <video v-if="collectionVideo.isShow" :src="item" style="width: 100%;" loop="loop" controls="controls">not support video</video>
        </Col>
        <Col span="2">
          &nbsp;
        </Col>
      </Row>
    </Modal>
    <Modal v-model="collectionAudio.isShow" draggable scrollable :mask="false" title="音频采集">
      <Row v-for="item in collectionAudio.urls" :key="item" :gutter="12" style="margin-bottom: 10px;">
        <Col span="2">
          &nbsp;
        </Col>
        <Col span="20">
          <audio v-if="collectionAudio.isShow" :src="item" style="width: 100%;" loop="loop" controls="controls">not support audio</audio>
        </Col>
        <Col span="2">
          &nbsp;
        </Col>
      </Row>
    </Modal>
  </div>
</template>
<script>
import config from '@/config'
import { Sitdown } from 'sitdown'

const gfm = new Sitdown({
  keepFilter: ['style'],
  codeBlockStyle: 'fenced'
})

export default {
  name: 'Webview',
  props: {
    url: {
      type: String,
      default: () => {
        return ''
      }
    },
    isShow: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data () {
    return {
      ImgProxyUrl: config.urls.imgProxyUrl,
      ScreenCaptureURL: config.urls.screenCaptureURL,
      MhtmlTransforURL: config.urls.mhtmlTransforURL,
      webview: {
        url: '',
        inputUrl: '',
        disableJs: false
      },
      collection: {
        baseData: {},
        columns: [],
        isShow: false
      },
      collectionVideo: {
        videoUrls: [],
        isShow: false
      },
      collectionAudio: {
        urls: [],
        isShow: false
      }
    }
  },
  computed: {
    collectionData () {
      console.log(this.collection.baseData)
      let data = {}
      this.collection.columns.forEach(element => {
        console.log(element)
        let dataCollectionSource = element.dataCollectionSource
        let key = element.key
        if (dataCollectionSource === 'Referer') {
          data[key] = this.collection.baseData.referrer
        } else if (dataCollectionSource === 'location-href') {
          data[key] = this.collection.baseData.href
        } else if (dataCollectionSource === 'html-head-title') {
          // 页面标题
          data[key] = this.collection.baseData.title
        } else if (dataCollectionSource === 'page-screenshot') {
          // 页面截图

        } else if (dataCollectionSource === 'page-selection-text') {
          // 页面选择文本
          data[key] = this.collection.baseData.selectTxt
        } else if (dataCollectionSource === 'page-selection-html') {
          // 页面选择HTML

        } else if (dataCollectionSource === 'custom') {
          // 自定义

        }
      })
      return data
    }
  },
  watch: {
    url (val) {
      if (val) {
        this._openWebview(val)
      }
    },
    isShow (val) {
      this.isShow = val
    }
  },
  created () {
    window.addEventListener('message', this.receiveData, false)
  },
  methods: {
    webviewUrlInputEnterHandle () {
      this.webview.url = this.webview.inputUrl
    },
    receiveData (event) {
      if (this.isShow) {
        console.log(event)
        if (event.data.action === 'COLLECTION_DATA') {
          this.collection.baseData = event.data.data
          this.collection.isShow = true
        } else if (event.data.action === 'COLLECTION_VIDEO') {
          let videoUrls = event.data.data
          if (videoUrls && videoUrls.length && videoUrls.length > 0) {
            this.collectionVideo.videoUrls = videoUrls
            this.collectionVideo.isShow = true
          }
        } else if (event.data.action === 'COLLECTION_AUDIO') {
          let urls = event.data.data
          if (urls && urls.length && urls.length > 0) {
            this.collectionAudio.urls = urls
            this.collectionAudio.isShow = true
          }
        } else if (event.data.action === 'HTML_TO_MARKDOWN') {
          let markdown = gfm.HTMLToMD(event.data.data)
          console.log(markdown)
        }
      }
    },
    _openWebview (url, columns) {
      this.webview.url = url
      this.webview.inputUrl = url
      this.collection.columns = columns
    },
    _loaded () {
      const cookie = document.cookie
      console.log(cookie)
      // this.iframeWin.postMessage(cookie, this.src)
    },
    _base64Encode (val) {
      return btoa(val)
    },
    _open (url, method) {
      window.open(url, method)
    },
    _screenCapture (url, method) {
      url = this.ScreenCaptureURL + btoa(encodeURI(url))
      window.open(url, method)
    }
  }
}
</script>

<style lang="less" scoped>
  .browser {
    height: 100%;
    position: relative;
    .browser-top {
      width: 100%;
      height: 40px;
      line-height: 40px;
      padding-left: 12px;
      padding-right: 12px;
      position: absolute;
      top: 0px;
      border-bottom: 1px solid #e8eaec;
    }
    .browser-main {
      height: 100%;
      padding: 40px 0px 20px 0px;
    }
    .browser-footer {
      width: 100%;
      height: 20px;
      line-height: 20px;
      padding-left: 12px;
      padding-right: 12px;
      position: absolute;
      bottom: 0px;
      border-top: 1px solid #e8eaec;
      text-align: right;
    }
  }
</style>
